<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>手机测试</title>
        <style type="text/css">
            body{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-right: 0px;
            margin-left: 0px;
            font-size: 60px;
            }

            #myCanvas{
            border: 1px solid ;
            float:left;
            }
        </style>
    </head>

    <body>
        <div>
            <meta http-equiv="refresh" content="1">
            <canvas id="myCanvas" width="1080" height="2280"></canvas>
        </div>

        <script type="text/javascript">
            window.onload = function ()
            {
                var myCanvas = document.getElementById('myCanvas');
                var painting = myCanvas.getContext('2d');
                setInterval(function()
                {
                    painting.beginPath();
                    //1.img对象
                    var img = new Image();
                    //2.img对象 设置 src
                    img.src = './Image/html.png';
                    //3.等图片加载完成后再去设置图片显示
                    img.onload = function ()
                    {
                    painting.clearRect(0, 0, myCanvas.width, myCanvas.height)
                    painting.drawImage(img, 0, 0, 1080, 2280);//4.图片显示在画布上
                    };
                }, 100);
            };
        </script>
    </body>
</html>